<template>
  <div
    class="index-page"
    @mousewheel="mousewheel"
  >
    <nav-bar></nav-bar>
    <div :class="pageClassName">
      <home-page></home-page>
      <basic-information-page></basic-information-page>
      <skill-page></skill-page>
      <work-page></work-page>
      <div>
        <project-experience></project-experience>
      </div>
      <bottom-page></bottom-page>
    </div>
    <span
      v-show="iconDownShow"
      @click="clickIconDown"
      class="iconfont"
      :class="iconDown==='1'? 'icon-down-one':'icon-down-two'"
    >&#xe648;</span>
    <div
      class="left-nav"
      v-show="leftNavShow"
    >
      <p class="title">Projects</p>
      <div class="content">
        <p
          :class="rollValue===item.rollValue? 'active':''"
          @click="clickLeftNavItem(item.rollValue)"
          v-for="(item,index) in leftNavList"
          :key="index"
        >{{item.text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import NavBar from '@/page/page-child/NavBar.vue'
import HomePage from '@/page/page-child/HomePage.vue'
import BasicInformationPage from '@/page/page-child/BasicInformationPage.vue'
import SkillPage from '@/page/page-child/SkillPage.vue'
import WorkPage from '@/page/page-child/WorkPage.vue'
import ProjectExperience from '@/page/page-child/ProjectExperience.vue'
import BottomPage from './page-child/BottomPage.vue'
export default {
  // 组件名称
  name: 'IndexPage',
  // 局部注册的组件
  components: {
    NavBar,
    HomePage,
    BasicInformationPage,
    SkillPage,
    WorkPage,
    ProjectExperience,
    BottomPage
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      iconDown: '1',
      lock: true,
      leftNavList: [
        { text: '设计院综合业务管理系统', rollValue: 5 },
        { text: '批量出图系统官网', rollValue: 6 },
        { text: '图文店商城（微信小程序）', rollValue: 7 },
        { text: '图文店智能综合业务管理系统', rollValue: 8 },
      ]
    }
  },
  // 计算属性
  computed: {
    leftNavShow: function () {
      if (this.rollValue >= 5 && this.rollValue < 9) {
        return true
      } else {
        return false
      }
    },
    iconDownShow: function () {
      if (this.rollValue === 9) {
        return false
      } else {
        return true
      }
    },
    ...mapState(['rollValue', 'pageClassName'])
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    setInterval(() => {
      if (this.iconDown === '1') {
        this.iconDown = '2'
      } else if (this.iconDown === '2') {
        this.iconDown = '1'
      }
    }, 450)
    document.body.parentNode.style.overflow = "hidden"
    window.addEventListener("keydown", this.KeyDown, true)
  },
  // 组件方法
  methods: {
    ...mapMutations(['pageDown', 'pageUp', 'pageJumps']),
    //点击键盘上下
    KeyDown (e) {
      if (e.key === 'ArrowDown' || e.keyCode === 40) {
        this.pageDown()
      } else if (e.key === 'ArrowUp' || e.keyCode === 38) {
        this.pageUp()
      }
    },
    // 点击向下按钮
    clickIconDown () {
      this.pageDown()
    },
    // 监听鼠标滚轮滚动
    mousewheel (e) {
      if (this.lock) {
        if (e.deltaY > 0) {
          this.pageDown()
        } else if (e.deltaY < 0) {
          this.pageUp()
        }
      }
      this.lock = false
      setTimeout(() => {
        this.lock = true
      }, 1000)
    },
    //点击左边nav
    clickLeftNavItem (value) {
      this.pageJumps(value)
    }
  }
}
</script>

<style scoped lang="less">
.index-page {
  position: relative;
  .iconfont {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 40rem;
    height: 40rem;
    text-align: center;
    cursor: pointer;
  }
  .icon-down-one {
    top: 846rem;
    font-size: 30rem;
    opacity: 0.6;
    transition: all 0.35s ease-in 0s;
  }
  .icon-down-two {
    top: 840rem;
    font-size: 30rem;
    opacity: 0.2;
    transition: all 0.45s ease-in 0s;
  }
  .class-name-1 {
    z-index: 2;
    transform: translate(0, 0);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-2 {
    z-index: 2;
    transform: translate(0, -937rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-3 {
    z-index: 2;
    transform: translate(0, -2017rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-4 {
    z-index: 2;
    transform: translate(0, -3097rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-5 {
    z-index: 2;
    transform: translate(0, -4177rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-6 {
    z-index: 2;
    transform: translate(0, -5257rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-7 {
    z-index: 2;
    transform: translate(0, -6337rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-8 {
    z-index: 2;
    transform: translate(0, -7417rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .class-name-9 {
    z-index: 2;
    transform: translate(0, -8497rem);
    transition: all 0.5s ease-in-out 0s;
  }
  .left-nav {
    position: absolute;
    top: 300rem;
    left: 88rem;
    .title {
      font-size: 28rem;
      color: #3b3e43;
      text-decoration: underline;
    }
    .content {
      font-size: 16rem;
      color: rgba(0, 0, 0, 0.6);
      p {
        margin-bottom: 18rem;
        cursor: pointer;
        &:hover {
          color: #000;
        }
      }
      .active {
        color: #000;
      }
    }
  }
}
</style>
